<template>
  <el-row id="banner" :style="{ height: infor.height }">
    <el-col class="img">
      <img :src="infor.url" alt srcset v-if="infor.type == 0" />
      <div class="video" v-else-if="infor.type == 1">
        <!-- <video src="http://re.hqy2001.com/PINXUAN/huaqingyuanjiaoyu.mp4"></video>autoplay controls -->
        <img
          src="/static/images/about/play.png"
          class="playImg"
          alt
          srcset
          @click="videoPlay"
          v-show="playImgShow"
        />
        <video
          x-webkit-airplay="true"
          webkit-playsinline="true"
          id="bannerVideo"
          class="bannerVideo"
          :poster="infor.url"
          loop
          playsinline="tvc"
          type="video/mp4"
          :preload="infor.url"
          x5-video-player-type="h5"
          x5-video-player-fullscreen="true"
          ref="bannerVideo"
        >
          <source src="http://re.hqy2001.com/PINXUAN/huaqingyuanjiaoyu.mp4" type="video/mp4" />
          <embed src="http://re.hqy2001.com/PINXUAN/huaqingyuanjiaoyu.mp4" hidden="no" />
        </video>
      </div>
      <swiper class="swiper" v-else-if="infor.type == 2" :options="swiperOption">
        <swiper-slide>
          <!-- <img :src="infor.url" alt="" srcset="" /> -->
          <img :src="banner[type]" alt srcset />
          <!-- <img :src="bannerLb[0].img" alt="" srcset="" /> -->
        </swiper-slide>
        <swiper-slide>
          <!-- <img :src="infor.url" alt="" srcset="" /> -->
          <img src="/static/images/banner/banner3.png" alt srcset @click="toAIhref" />
          <!-- <img :src="bannerLb[1].img" alt="" srcset="" /> -->
        </swiper-slide>
        <!-- <swiper-slide>
          <img :src="infor.url" alt="" srcset="" />
          <img src="static/images/banner/banner3.png" alt="" srcset="" />
        </swiper-slide>-->
      </swiper>
    </el-col>
  </el-row>
</template>
<script>
export default {
  // 页面名称
  name: "banner",
  // 接受父组件传值
  props: {
    infor: Object,
    type: {
      type: String,
      default: "HZ"
    }
  },
  // 定义模板
  components: {
  },
  // Data数据
  data() {
    return {
      swiperOption: {
        autoplay: true, //可设置数值来指定播放速度
        // loop: false
      },
      playImgShow: true,
      banner: {
        HZ: "/static/images/banner/hz.jpg",
        JY: "/static/images/banner/jy.jpg",
        GZF: "/static/images/banner/gzf.jpg",
        ZGC: "/static/images/banner/zgc.jpg",
        DZM: "/static/images/banner/dzm.jpg",
        SD: "/static/images/banner/sd.jpg"
      },
    };
  },
  // 侦听器
  watch: {
    type: function(newVal, oldVal) {
      console.log(newVal, oldVal);
      console.log(this.type);
    }
  },
  // 钩子函数
  mounted() {
    console.log(this.type);
  },
  // 方法
  methods: {
    videoPlay() {
      // let myVideo = document.getElementById('bannerVideo')
      // this.$refs.bannerVideo.pause();//暂停
      this.$refs.bannerVideo.play(); //播放
      this.playImgShow = false;
    },
    toAIhref() {
      window.open("http://www.hqy2001.com/AI/index1.shtml", "_blank");
    }
  }
};
</script>
<style lang="scss" scoped>
#banner {
  width: 100%;

  .img {
    width: 100%;
    height: 100%;
    position: relative;

    img,
    .video,
    video,
    .swiper {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .playImg {
      width: 54px;
      height: 54px;
      position: absolute;
      top: 270px;
      left: calc(50% - 27px);
      z-index: 99;
      cursor: pointer;
    }
  }
}

.bannerVideo {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
</style>
